Vue.js x Firebaseの練習ログ

/emoji/vue.iconとCloud firestoreを使ったchat appをdeployしてみる練習の記録

題材：firestore, vue.jsでリアルタイム同期のチャットを実装してみるチュートリアル形式 - Qiita

/icons/hr.icon

2020-09-06 22:55:49

projectを作る

chat-firestore-vue-sample

firestoreはlock modeで作った

22:59:17 collection (firestore)を作る

23:01:51 できた

https://gyazo.com/c025ea23ec31940278e0000798a22409

23:02:48 /icons/vue.js.iconのprojectを作る

23:06:08 作成完了。localhost確認済み

/icons/VSCode.iconから編集する

23:08:52 lintの設定完了

https://qiita.com/ryo2132/items/2881d8223eb2ad3050a1#プラグインのインストールをやる

$ vue add vuetify

23:11:38 installに失敗した？

https://gyazo.com/6ddfa27f50a357b348eea1e240b69121

installは出来たけどsettingに失敗したようだ

とりあえずスルー

2020-09-07 17:01:35 vuetifyはvue3をsupportしていない

vue.js - How to connect Vue 3 with Vuetify? - Stack Overflow

$ yarn add vuefire@next firebase

$ vim src/plugins/firebase.js

23:28:00 pluginはsrc/main.tsでinstallしないといけないようだ

方法も解説記事と違う

code:main.ts

import { createApp } from "vue";

import App from "./App.vue";

import "./registerServiceWorker";

import router from "./router";

import {firestorePlugin} from 'vuefire';

// install plugins

createApp(App)

.use(router)

.use(firestorePlugin)

.mount("#app");

23:29:16 /icons/firebase.iconのconsoleからAPI情報を取得する

23:37:25 発行し、環境設定ファイルに書き込んだ

Access Tokenの情報をGitに載せない

23:45:47 deploy出来たが、何も映らない

vuefireの内部で型エラーが発生している

Vueにprototypeがないとか言っている

00:28:48 なんでダメなのかわからん

pluginがVer.3.0に対応していない……なこたあないか。

2020-09-07 16:04:07

vuefireの使用を諦めた

16:12:14 /icons/vue.js.iconの公式documentを読んだほうが早い気がしてきた

最新の記法で書かれている

17:10:47 vuetifyで書かれている部分をnativeに置き換える

<li>に:keyが必要

17:41:00 vuefireなしだと、async/awaitを使わないといけないようだ

17:41:29 FirebaseError: Missing or insufficient permissions.エラーが出た

17:56:18 Firebaseはロックに使おう / Netadashi Meetup#8 Firebase - Speaker Deckを参考に、公開設定を実行した

https://gyazo.com/769e5771523e113f2a19ee6c9b7f718d

code:firebase.rule

rules_version = '2';

service cloud.firestore {

match /databases/{database}/documents {

match /{document=**} {

allow read: if resource.data.isPublic == true

|| request.auth.uid == resource.data.uid;

allow write: if false;

}

Vue.js 3.0 の新機能を試す。〜 Suspense 編〜 - Qiitaを参考に非同期処理にした

19:08:03 data()を挟むことでdataを取得できるようになった

動いたcode

code:setup.ts

setup: async () => {

const comments = ref<(firestore.DocumentData | undefined)[]>([]);

// firestoreのcommentsコレクションを参照

await db

.collection('comments')

.orderBy('createdAt')

.get()

.then(querySnapShot =>

querySnapShot.docs

.map(docQuery => docQuery.data())

.forEach(comment => comments.value.push(comment))

);

return { comments };

19:21:12 vuetifyが使えないので、/emoji/css.iconをベタ打ちする

sample-cahtからコピペする

ややこしかったので代わりにFirebase × Vue.js でサクッとリアルタイムに反映される掲示板を作る · tanaken.meから取った

19:34:48 いい感じ

https://gyazo.com/a3d90957385ddffc34c475c129ae9394

一旦ここでcommitしておく

21:17:04 少しずつcommitする

21:32:48 commit終了

21:32:56 CSS frameworkを探す

cssを自分で書くのはめんどくさし本筋じゃない

Bulmaが良さそうなので、Bulmaを/icons/vue.js.iconで使う方法を調べる

21:42:02 導入方法は2つある

CDN

今のrepoをそのまま使えるか？

$ yarn add bulma

vue-cliでSASSを有効にする必要がある

別のrepoで練習したほうが早そうだ

cssを使う

Vue プロジェクトで Bulma を使う - 山崎屋の技術メモ

とりあえずこれでやってみる

21:59:04 凝ったことをしないなら、この方法で十分っぽい

https://gyazo.com/8b1c77a994663385e272cba540fe1395

class名はCSSフレームワーク BULMA チュートリアル③ - Qiitaを参考にした

22:10:34 同じ情報が公式にあった

Media Object | Bulma: Free, open source, and modern CSS framework based on Flexbox

22:08:50 まとめておいた

Bulmaを使用する

22:18:41 app.vueにも適用した

【Vue.js】Vue CLI 3 + BulmaでSPA環境を5分でつくる！ | kawadeblogを参考にもう少し弄ってみる

23:02:03 modal windowを試す

firestore, vue.jsでリアルタイム同期のチャットを実装してみるチュートリアル形式 - Qiitaでは$refsで対処しているようだが、非推奨だし、vue3だとやりにくそう

cf. Vue.js の Composition API における this.$refs の取得方法 - Qiita

Teleport (vue3)を使うと実現できそうだ

23:04:46 調べる

23:35:24 できた

Bulmaを使うときは、class="modal is-active"にしないと見えない

あと、BulmaをCDN経由で使うことにした

public/index.htmlがあったので、そこにCDNを書き込むことが出来た

全てのcomponentに適用されるので便利

firestore, vue.jsでリアルタイム同期のチャットを実装してみるチュートリアル形式 - Qiitaを実装してみる

23:49:54 外観はいい感じになった

https://gyazo.com/576568496571447c03033b66005a72f9

23:50:14 textを右寄せにする

https://gyazo.com/4df167ce9d02146a74347c6ddcd9cb50

App.vueにあったtest-alignを消した

comment追加機能を作る

v-modelを使うときは、propsを使えないようだ。

00:17:44 いいかんじになった

https://gyazo.com/94be7f011215d78b0e1e37f3a18850e3

/emoji/warning.iconルールを読み書き自由にしたので、かなり危険な状態

real-time更新はまだ実装できていない

00:23:23 一旦commitする

00:28:59 commit終了

real-time更新の実装に挑戦する

記録がscrapboxとspreadsheetとに分散しているで考えているweb appにはreal-time更新は必要ないので、うまく実装できなかったらその時点でやめる

Cloud Firestore でリアルタイムアップデートを入手する | Firebase

01:20:26 real-time更新は成功。ただしidの情報が取得できていないことに気づいたので、そこだけ直す

firestore.QueryDocumentSnapShotからでないとidを取得できない

01:35:48 commentを表現するinterfaceとmake函数を作って対処した

01:36:48 2つwindowを並べて、同期でされているか確認する

01:37:55 確認終了。同期的出来ていた！

一旦commit

/icons/done.icon01:39:53 した

色々修正

<input>に文字が残らないようにする

/icons/done.icon01:43:26 完了

cancelなど、投稿するbuttonを押したとき以外は、windowが閉じても入力内容が保持される事がわかった

便利takker.icon

Enterキーで投稿する

01:45:19 @keyup.enter="<該当するevent handler>"を<input>に入れれば出来るっぽい

from Event Handling | Vue.js

01:49:38 出来たー

comment削除機能を入れる

編集機能も入れたいな

まあこれは後で

firestore, vue.jsでリアルタイム同期のチャットを実装してみるチュートリアル形式 - Qiita

01:52:14 一旦トイレ

01:54:27 戻ってきた

02:09:42 うまくいっていない

onSnapShotから帰ってくる型が、addedのときとremovedのときとで違う？

02:16:28 実装完了

少し前から、機能を実装するごとにcommitするようにしている

02:10:32 addedのときは、初期状態も含めて返却されるようだ

重要: 最初のクエリスナップショットには、クエリに一致する既存のすべてのドキュメントの added イベントが含まれています。これは、クエリの初期状態に対してクエリスナップショットが最新の状態になるように、一連の変更を取得しているためです。たとえば、最初のクエリスナップショットで受け取った変更から、初期状態を処理する特別なロジックを追加する必要なく、UI を直接入力できます。

from Cloud Firestore でリアルタイムアップデートを入手する | Firebase

なので初期設定用処理を削除する

02:13:43 初期設定を削除したらVue.js x Firebaseの練習ログ#5f56695acd8fd40000281d20が解決した

一体何だったんだ……takker.icon

02:16:57 deployしてみるか

その前に、認証をどうにかしないと

02:41:56 認証について調べるがよくわからん

参考になりそうなサイト

0から始める Firestore + Firebase Authentication - Qiita

JavaScript でカスタム認証システムを使用して Firebase 認証を行う

Cloud Firestore セキュリティルールを使ってみる | Firebase

VueでFirebaseを使いログイン認証が必要な専用ページを作ろう - Qiita